<template>
	<view :class="['qn-page-'+theme]">
		<Aempty text="暂无优惠券～～" src="../../static/empty/coupon.png" v-if="!coupon_list.length"></Aempty>
		<view class="ticket" v-for="(item, index) in coupon_list" :key="index">
			<view class="left">
				<view class="price-view">
					<view class="top primary-color">
						￥
						<text class="big">{{ item.reducePrice }}</text>
					</view>
					<view class="c-desc" v-if="Number(item.minPrice) > 0">满{{ item.minPrice }}元可用</view>
					<view class="c-desc" v-else>无使用门槛</view>
				</view>
				<view class="introduce">
					<view class="title ellipsis">{{ item.name }}</view>
					<view class="c-tag primary-btn-pain">
						{{
							item.applyRange === 10
								? '全场通用'
								: item.applyRange === 20
								? '指定分类'
								: item.applyRange === 30
								? '指定品牌'
								: item.applyRange === 40
								? '指定商品'
								: ''
						}}
					</view>
					<view class="date u-line-1">{{ $u.timeFormat(item.startTime, 'yyyy.mm.dd') }}-{{ $u.timeFormat(item.endTime, 'yyyy.mm.dd') }}</view>
				</view>
			</view>
			<view class="right" @click="receiveCoupon(item.id)"><view class="use immediate-use primary-btn-pain" :round="true">立即领取</view></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			pageSize: 10,
			pageTotal: 0,
			coupon_list: [],
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0 // swiper组件的current值，表示当前那个swiper-item是活动的
		};
	},
	onShow() {
		this.couponList();
	},
	methods: {
		couponList() {
			this.$u.api
				.couponList({
					page: this.page,
					pageSize: this.pageSize
				})
				.then(res => {
					this.coupon_list = res.data.map(item => {
						return {
							...item,
							reducePrice: Number(item.reducePrice),
							minPrice: Number(item.minPrice)
						};
					});
					this.pageTotal = res.pageTotal;
				});
		},
		receiveCoupon(id) {
			this.$u.api.receiveCoupon(id).then(res => {
				this.$api.mag('领取成功');
				this.couponList();
			});
		}
	}
};
</script>
<style lang="scss">
.ticket {
	width: 706upx;
	margin: 20upx auto 0;
	display: flex;
	.left {
		width: 70%;
		padding: 30rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		border-right: dashed 2rpx rgb(224, 215, 211);
		display: flex;
		.price-view {
			width: 172rpx;
			text-align: center;
			.top {
				color: $price-color;
				font-size: 28rpx;
				.big {
					font-size: 60rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
			}
			.c-desc {
				font-size: 24rpx;
				color: $u-type-info-dark;
			}
		}
		.introduce {
			width: 274rpx;
			margin-left: 10rpx;
			.title {
				font-size: 28rpx;
				-webkit-line-clamp: 1;
			}
			.c-tag {
				padding: 0 12upx;
				line-height: 36upx;
				height: 36upx;
				border: 1px solid $price-color;
				color: $price-color;
				font-size: 22upx;
				display: inline-block;
				margin: 10upx 0;
				border-radius: 4upx;
			}
			.date {
				font-size: 24rpx;
				color: $u-type-info-dark;
			}
		}
	}
	.right {
		width: 30%;
		padding: 40rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		.use {
			padding: 0 24rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			color: $price-color;
			border: 1px solid $price-color;
			line-height: 58rpx;
			height: 60rpx;
		}
	}
}
</style>
